<template>
	<view class="container">
		<view class="box-bd df jsb ac h100">
			<view class="w30 df ac">
				<view class="title-icon"></view>
				<view class="ml20">日期</view>
			</view>
			<view class="w70 df jse ac" style="text-align: right">
				<uni-datetime-picker
					type="date"
					v-model="paramsData.dailyDateStr"
					@change="changeDate($event)"
				>
					<text>{{ paramsData.dailyDateStr }}</text>
					<text class="label ml20">修改</text>
				</uni-datetime-picker>
				<!-- <picker :value="paramsData.dailyDateStr" mode="date" @change="dateChange">
					<button class="primary-button small-size ml20 mr20">修改</button>>
				</picker> -->
				<!-- <button class="primary-button small-size ml20 mr20">修改</button> -->
			</view>
		</view>
		<view class="box-bd mt20">
			<view class="df ac h100">
				<view class="title-icon"></view>
				<view class="ml20">{{ type == 2 ? '总结' : '建议' }}内容</view>
			</view>
			<view class="df" v-if="type == 3">
				<view
					class="nav-tag"
					:class="{ 'nav-tag-act': item.active }"
					v-for="(item, index) in tagList"
					:key="index"
					@tap="changeTag(index)"
					>{{ item.tagName }}</view
				>
			</view>
			<view class="pd20">
				<view>
					<diy-upload
						limit="6"
						:value="fileList"
						title="上传照片/视频"
						@emitsUrl="getUploadFile($event, tempIndex)"
					></diy-upload>
					<!-- <diy-upload title="上传照片/视频"></diy-upload> -->
				</view>
				<view class="mt20">
					<view class="text-box">
						<view class="tab df lh80">
							<view
								class="flex-1 f32 g3"
								@tap="setCurrent(item.type)"
								:class="current === item.type ? 'active' : ''"
								v-for="(item, index) in textArr"
								:key="index"
							>
								{{ item.name }}
							</view>
						</view>
						<view class="input-h" v-if="current === 'text'">
							<textarea
								v-model="scheduleContent"
								placeholder="日程内容、描述"
								class="pd20"
							></textarea>
						</view>
						<view class="" v-if="current === 'voice'">
							<diy-record
								:audioUrl="voiceDTOS.voiceUrl"
								:voliceTime="voiceDTOS.voiceDuration"
								:context="voiceDTOS.voiceText"
								@input="textinput($event, tempIndex)"
								@upload="getRecordFile($event, tempIndex)"
							></diy-record>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="box-bd">
			<view class="df jsb ac h100 mt20">
				<view class="w30 df ac">
					<view class="title-icon"></view>
					<view class="ml20">可见成员</view>
				</view>
				<view class="w70 df jse ac">
					<view class="w50 text-over tr">
						<text class="mr10">本人</text>
						<!-- 	<text class="mr10">本人</text>
		    			<text class="mr10">本人</text> -->
					</view>
					<button
						class="primary-button small-size ml20 mr20"
						@tap="addUser"
					>
						添加成员
					</button>
				</view>
			</view>
			<view class="pd20">
				<text
					class="mb20 ml20"
					v-for="item in userData.filter((u) => u.showFlag)"
					:key="item.id"
					>{{ item.name }}</text
				>
			</view>
		</view>
		<view class="bottom-button-bd df ac"
			><button
				@tap.stop="$noMultipleClicks(onSubmit, {})"
				class="primary-button w90"
			>
				确定
			</button></view
		>
		<!-- 选择成员 -->
		<user-list
			ref="userRefs"
			:userList="userData"
			@search="searchUserList"
			@complete="updateUserList"
			:show-search="false"
		></user-list>
	</view>
</template>

<script>
import diyUpload from '@/subPackagesLog/components/diy-upload/diy-upload.vue'
import userList from './compoents/userList/userList.vue'
const dayjs = require('@/common/dayjs.min.js')
export default {
	components: {
		diyUpload,
		userList,
	},
	data() {
		return {
			dayjs,
			tagList: [],
			detailsId: '',
			currentTag: 1,
			current: 'voice',
			noClick: true,
			scheduleId: '',
			scheduleContent: '',
			fileList: [],
			userData: [],
			paramsData: {
				dailyDateStr: '',
			},
			voiceDTOS: {
				voiceUrl: '',
				voiceDuration: 2,
				voiceText: '',
			},
			type: '',
			disabled: true,
			textArr: [
				{ name: '文字输入', type: 'text' },
				{ name: '语音输入', type: 'voice' },
			],
			allUserList: [],
			searchUserName: '',
		}
	},
	methods: {
		// 设置输入方式
		setCurrent(type) {
			this.current = type
		},
		//修改时间
		changeDate(e) {
			this.paramsData.dailyDateStr = e
		},
		// 图片处理
		getUploadFile(fileList, tempIndex) {
			this.fileList = fileList
		},
		// 文本赋值
		textinput(remark, tempIndex) {
			this.voiceDTOS.voiceText = remark
		},
		//整改项音频
		getRecordFile(volice, tempIndex) {
			this.voiceDTOS.voiceUrl = volice.remark
			this.voiceDTOS.voiceDuration = volice.time
			this.voiceDTOS.voiceText = volice.voiceText
		},
		changeTag(index) {
			this.tagList[index].active = !this.tagList[index].active
		},
		addUser() {
			this.$refs.userRefs.init()
		},
		getDetail() {
			this.$request
				.request('carer-platform/journal/getUserDailyAdviseDetail', {
					method: 'get',
					data: { id: this.detailsId },
				})
				.then((res) => {
					let { data } = res
					this.paramsData = res.data
					if (
						this.paramsData.tags &&
						this.paramsData.tags.length > 0
					) {
						this.tagList.map((item) => {
							if (this.paramsData.tags.includes(item.id)) {
								item.active = true
							}
						})
					}
					if (data.picUrls && data.picUrls.length > 0) {
						data.picUrls.map((item) => {
							this.fileList.push({ url: item })
						})
					}
					if (data.userIds && data.userIds.length > 0) {
						this.userData.map((item) => {
							if (data.userIds.includes(item.id)) {
								item.showFlag = true
							}
						})
					}
					if (data.voiceUrl) {
						this.voiceDTOS.voiceUrl = data.voiceUrl
						this.voiceDTOS.voiceDuration = data.voiceDuration
						this.voiceDTOS.voiceText = data.voiceText
					}
					this.scheduleContent = data.content
				})
		},
		// 获取标签
		getTags() {
			this.$request
				.request('carer-platform/carer/businessTag/getBusinessTags', {
					method: 'post',
					data: {
						orgId: uni.getStorageSync('orgId'),
						userId: uni.getStorageSync('userId'),
						typeTags: [9],
					},
				})
				.then((res) => {
					let { data } = res
					if (data) {
						data.map((item) => {
							item.active = false
						})
					}
					this.tagList = data || []
				})
		},
		//提交数据
		onSubmit() {
			let url = 'carer-platform/journal/saveUserDailyAdvise'
			let editUrl = 'carer-platform/journal/updateUserDailyAdvise'
			let ids = this.tagList.filter((item) => item.active)
			ids = ids.map((item) => {
				return item.id
			})
			let userIds = this.userData
				.filter((item) => item.showFlag)
				.map((item) => {
					return item.id
				})
			if (this.voiceDTOS.voiceText == '' && this.scheduleContent === '') {
				uni.showToast({
					title: '文字输入或者语音输入两者不能为空',
					icon: 'none',
				})
				return
			}
			let params = {
				// dailyDate: dayjs().format('YYYY-MM-DD'),

				content: this.scheduleContent,
				userIds: userIds,
				...this.voiceDTOS,
				id: this.detailsId,
				dailyDate: this.paramsData.dailyDateStr,
			}
			if (this.type == 3) {
				params.tags = ids
			}
			if (this.fileList && this.fileList.length > 0) {
				let url = this.fileList.map((item) => {
					return item.url
				})
				params.picUrls = url
			}
			this.$request
				.request(this.detailsId ? editUrl : url, {
					method: 'post',
					data: params,
				})
				.then((res) => {
					let { success } = res
					if (res.success) {
						uni.showToast({
							title: '保存成功',
							icon: 'success',
						})
						setTimeout(() => {
							uni.$emit('refreshData', 3)
							uni.navigateBack({
								delta: 1,
								success() {
									const page = getCurrentPages().pop() //跳转页面成功之后
									if (!page) return
									page.onLoad({ refresh: true }) //如果页面存在，则调用 onLoad 方法
								},
							})
						}, 500)
					}
				})
		},
		//搜索
		searchUserList(data) {
			this.searchUserName = data
			this.getUserData()
		},
		//更新成员
		updateUserList(data) {
			let index = data.index
			if (this.allUserList && this.allUserList.length) {
				let allIndex = this.allUserList.findIndex(
					(res) => res.id === data.id
				)
				this.allUserList[allIndex].showFlag =
					!this.allUserList[allIndex].showFlag
			}
			this.userData[index].showFlag = !this.userData[index].showFlag
			this.$set(this.userData, index, this.userData[index])
		},
		getUserData() {
			let _that = this
			this.$request
				.request('user-web/user/queryPageByDefaultRole', {
					method: 'post',
					data: { roleIds: [-3, -8], pageIndex: 1, pageSize: 500 },
				})
				.then((res) => {
					let data = res.data.data
					if (data) {
						data.map((item) => {
							item.showFlag = false
						})
						data = data.filter(
							(item) => item.id !== uni.getStorageSync('userId')
						)
					}
					if (!_that.searchUserName) {
						_that.allUserList =
							JSON.parse(JSON.stringify(data)) || []
					}
					this.userData = data || []
				})
		},
	},
	async onLoad(options) {
		let { type, id } = options
		console.log(type)
		await this.getTags()
		await this.getUserData()
		this.type = type
		if (id) {
			this.detailsId = id
			this.getDetail()
		} else {
			this.paramsData.dailyDateStr = dayjs().format('YYYY-MM-DD')
		}
		let title = options.type === '2' ? '写总结' : '写建议'
		wx.setNavigationBarTitle({
			title: title,
		})
	},
}
</script>

<style scoped lang="scss">
.container {
	background-color: #ffffff;
	min-height: calc(100vh -160rpx);
	font-size: 36rpx;
	padding-bottom: 160rpx;
	.box-bd {
		border-radius: 10rpx;
		padding: 0;
	}
	.nav-tag {
		flex: 1;
		margin-left: 10rpx;
		margin-right: 10rpx;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 32rpx;
	}
}
.text-box {
	border-radius: 6rpx;
	border: 2rpx solid #f2f2f2;
	.tab {
		align-items: center;
		justify-content: center;
		text-align: center;
		border-radius: 6rpx 6rpx 0 0;
		view {
			border-radius: 6rpx 6rpx 0 0;
			&.active {
				background-color: $primary-color;
				color: #ffffff;
			}
		}
	}
}
.label {
	background-color: $primary-color;
	color: #ffffff;
	display: inline-block;
	margin: 5rpx;
	height: 60rpx;
	width: 120rpx;
	text-align: center;
	line-height: 60rpx;
	padding: 0 15rpx;
	font-size: 32rpx;
	border-radius: 6rpx;
}
</style>
